<!DOCTYPE html>
<style>
table { border-collapse: collapse; }
td { width: 30px; height: 30px; }
.t1 { border-top: 10px solid green }
.t2 { border-top: 20px solid blue }
.t3 { border-top: 30px solid red }
.t4 { border-top: 40px solid yellow }
.r1 { border-right: 10px solid green }
.r2 { border-right: 20px solid blue }
.r3 { border-right: 30px solid red }
.r4 { border-right: 40px solid yellow }
.b1 { border-bottom: 10px solid green }
.b2 { border-bottom: 20px solid blue }
.b3 { border-bottom: 30px solid red }
.b4 { border-bottom: 40px solid yellow }
.l1 { border-left: 10px solid green }
.l2 { border-left: 20px solid blue }
.l3 { border-left: 30px solid red }
.l4 { border-left: 40px solid yellow }
</style>
<table>
  <tr>
    <td class="t3 r2 b3 l1"></td>
    <td class="t1 r4 b1 l2"></td>
    <td class="t2 r3 b1 l4"></td>
    <td class="t4 r1 b4 l3"></td>
    <td class="t2 r1 b2 l1"></td>
    <td class="t3 r2 b3 l1"></td>
    <td class="t4 r2 b3 l2"></td>
  </tr>
  <tr>
    <td class="t3 r4 b3 l4"></td>
    <td class="t1 r1 b2 l4"></td>
    <td class="t1 r2 b3 l1"></td>
    <td class="t4 r3 b4 l2"></td>
    <td class="t2 r4 b1 l3"></td>
    <td class="t3 r1 b2 l4"></td>
    <td class="t3 r1 b2 l1"></td>
  </tr>
  <tr>
    <td class="t3 r1 b4 l2"></td>
    <td class="t2 r4 b3 l1"></td>
    <td class="t3 r1 b2 l4"></td>
    <td class="t4 r2 b4 l1"></td>
    <td class="t1 r3 b1 l2"></td>
    <td class="t2 r3 b2 l3"></td>
    <td class="t2 r3 b4 l3"></td>
  </tr>
  <tr>
    <td class="t4 r2 b1 l3"></td>
    <td class="t3 r1 b3 l2"></td>
    <td class="t2 r3 b4 l1"></td>
    <td class="t4 r3 b2 l3"></td>
    <td class="t1 r4 b1 l3"></td>
    <td class="t2 r1 b3 l4"></td>
    <td class="t4 r2 b1 l1"></td>
  </tr>
  <tr>
    <td class="t1 r4 b3 l2"></td>
    <td class="t3 r2 b1 l4"></td>
    <td class="t4 r1 b3 l2"></td>
    <td class="t2 r4 b2 l1"></td>
    <td class="t1 r2 b1 l4"></td>
    <td class="t3 r2 b4 l2"></td>
    <td class="t1 r4 b3 l2"></td>
  </tr>
  <tr>
    <td class="t3 r2 b4 l1"></td>
    <td class="t1 r4 b3 l2"></td>
    <td class="t3 r4 b1 l4"></td>
    <td class="t2 r3 b2 l4"></td>
    <td class="t1 r3 b4 l3"></td>
    <td class="t4 r1 b2 l3"></td>
    <td class="t3 r2 b4 l1"></td>
  </tr>
</table>

